---
title: Action
---

An action is what a block can do when it is executed with Typebot. A [block](./block) can have multiple actions.

Here is the `sendMessage` action definition:

```ts
import { createAction, option } from "@typebot.io/forge";
import { auth } from "../auth";

export const sendMessage = createAction({
  auth,
  name: "Send message",
  options: option.object({
    chatId: option.string.layout({
      label: "Chat ID",
      placeholder: "@username",
    }),
    text: option.string.layout({
      label: "Message text",
      input: "textarea",
    }),
  }),
});
```

<Note>
  The action execution logic is defined separately in a `handlers.ts` file. See
  the [Run](./run) documentation for more information.
</Note>

<Frame>
  <img src="/images/contribute/action-example.png" alt="Action example" />
</Frame>

## Props

<ResponseField name="name" type="string" required>
  The name of the action.
</ResponseField>

<ResponseField name="auth" type="Auth">
  If the block requires authentication, the auth object needs to be passed to
  the action.
</ResponseField>

<ResponseField name="baseOptions" type="z.ZodObject<any>">
  If the block has options defined (see [block props](./block#props)), this
  needs to be provided here.
</ResponseField>

<ResponseField name="options" type="z.ZodObject<any>">
  The action configuration options. See <a href="./options">Options</a> for more
  information.
</ResponseField>

<ResponseField
  name="getStreamVariableId"
  type="(options) => string | undefined"
>
  If the action can stream content, this function should return the variable ID
  that will receive the streamed content. See{" "}
  <a href="./run#server-function--stream">Server function + stream</a> for more
  information.
</ResponseField>

<ResponseField
  name="getEmbedSaveVariableId"
  type="(options) => string | undefined"
>
  If the action displays an embed bubble that waits for an event, this function
  should return the variable ID where the event data will be saved. See{" "}
  <a href="./run#display-embed-bubble">Display embed bubble</a> for more
  information.
</ResponseField>

<ResponseField name="getSetVariableIds" type="(options) => string[]">
  A function that returns an array of variable IDs that will be set by this
  action. This is used for analytics and tracking purposes.
</ResponseField>

<ResponseField name="fetchers" type="{ id: string }[]">
  An array of fetcher references used to populate dropdown options dynamically.
  Each fetcher should be exported from the action file and implemented in the
  handlers file. See <a href="./fetcher">Fetcher</a> for more information.
</ResponseField>

<ResponseField name="turnableInto" type="TurnableIntoParam[]">
  An array of block IDs that this action can be converted into. This allows
  users to easily switch between similar blocks while preserving their
  configuration.
</ResponseField>

<Note>
  The action execution logic is now defined separately in a `handlers.ts` file
  using `createActionHandler()` and `createFetcherHandler()`. Check out the{" "}
  <a href="./run">Run</a> documentation for more information on how to implement
  handlers.
</Note>
